<script setup>
	import { ref, onMounted, computed, watch } from "vue";

	const props = defineProps({
		productData: {
			type: Object,
			required: true
		},
		idxOfShop: {
			type: Number
		},
		idxOfProduct: {
			type: Number,
			required: true
		},
		isInactive: {
			type: Boolean
		}
	})

	// 后端请求相关
	import decMallApi from "/api/dec/decIndex/decMallApi";

	// 全局状态相关
	import { storeToRefs } from 'pinia';
	import { useIsChosenStore } from '@/components/mall/stores/isChosen.js'
	const { isChosen, computePrice, isInactiveProductChosen } = storeToRefs(useIsChosenStore())
	const { updateIsChosen, updateIsInactiveProductChosen } = useIsChosenStore()
	const is_product_chosen = ref(
		!props.isInactive ? isChosen.value[props.idxOfShop].product[props.idxOfProduct] : isInactiveProductChosen.value[props.idxOfProduct]
	)
	const onCheckboxChange = (event) => {
		// 更新 is_product_chosen 状态
		is_product_chosen.value = event.detail;

		console.log('当前状态:', is_product_chosen.value ? '选中' : '未选中');
	}
	// 添加全局状态与is_product_chosen的双向绑定
	watch(is_product_chosen, (newData)=>{
		if(!props.isInactive)
		{
			// 正常购物车数据
			updateIsChosen(newData, props.idxOfShop, props.idxOfProduct);
		}
		else{
			// 失效购物车数据
			updateIsInactiveProductChosen(newData, props.idxOfProduct);
			console.log("更新后的失效全局数据: ", isInactiveProductChosen.value);
		}
	})
	watch(()=>isChosen.value?.[props.idxOfShop]?.product[props.idxOfProduct], ()=>{
		is_product_chosen.value = isChosen.value[props.idxOfShop].product[props.idxOfProduct];
	})

	// 更新商品数量
	import { useCountStore } from "../../stores/count.js";
	const { count } = storeToRefs(useCountStore())
	const { updateCount } = useCountStore();
	const onChangeCount = (newData)=>{
		// console.log("change count: ", "newData: ", newData, "idxOfShop: ", props.idxOfShop, "idxOfProduct: ", props.idxOfProduct);
		updateCount(newData, props.idxOfShop, props.idxOfProduct);
	}
	
	// 价格
	const integer_of_price = computed(()=>{
		return props.productData.product_price.split('.')[0];
	});
	const decimal_of_price = computed(()=>{
		return props.productData.product_price.split('.')[1];
	});

	// 下拉框
	const value = ref("")
	const range = ref([
		{value: "xl", text: "xl"}, 
		{value: "xxl", text: "xxl"},
		{value: "xxxl", text: "xxxl"}
	])
	const change = () => {
		
	}

	// 删除商品
	const deleted = ref(false);
	async function Del_shopping_car(){
		const params = {
			visit_gfid: 94199,
			car_id: 1
		}
		try{
			const res = await decMallApi.Del_shopping_car_API(params);
			// console.log(res);
			
		}catch(err){
			// console.log('Del_shopping_car 失败',err);
		}
	}
	function onClickDelete(){
		// console.log("删除商品");
		deleted.value = true;
		Del_shopping_car();
	}
	
	onMounted(()=>{
		// console.log("productItem: productData: ", props.productData, ", shopName: ", props.shopName);
		// console.log("productItem: ", isChosen.value.filter((item)=>item.shop_name===props.shopName)[0])
	})

	// 样式控制
	const product_item_height = computed(()=>{
		return props.productData.state ? "225rpx" : "250rpx";
	})
	const grey_text = computed(() => {
		return props.productData.state ? "rgb(128, 128, 128)" : "black";
	})
</script>

<template>
<view v-if="!deleted" class="productItem">
	<view class="productItem__row">
		
		<!-- 复选框 -->
		<view class="productItem__checkbox">
			<van-checkbox
				icon-class="tmp_checkbox"
			    :value="is_product_chosen"
			    checked-color="red"
				@change="onCheckboxChange"/>
		</view>
		
		<!-- 商品图片 -->
		<view class="container">
			<image class="productItem__image"  mode="aspectFill" :src="productData.product_ico"/>
			<view v-if="productData.state" class="flex productItem__image-overlay">
				<text class="productItem__image-overlay-text">{{productData.state}}</text>
			</view>
		</view>
		
		<!-- 商品的其他信息 -->
		<view class="productItem__col">
			<view class="productItem__product">
				<text class="productItem__product-name" :style="{color: grey_text}">{{productData.product_title}}</text>
			</view>
			
			<!-- <uni-data-select
				v-if="!productData.state"
			    v-model="value"
			    :localdata="range"
				placeholder="商品规格"
			    @change="change"/> -->
			<view class="productItem__attr-bg" v-if="!isInactive">
				<text class="productItem__attr-text">{{productData.product_attr_str}}</text>
			</view>
				
			<uni-tag 
				class="productItem__tag" 
				v-if="!productData.state"
				:text="productData.buy_type"
				custom-style="background-color: #fbe7ec; border-color:  #c9aaa8; color: #c14934; font-size: 10px; padding: 2px 4px;"/>

			<view v-if="isInactive" class="flex productItem__inactive-view-specs">
				<text class="productItem__inactive-specs">{{productData.product_attr_str}}</text>
				<image src="@/static/cancel.png" class="productItem__inactive-cancel" @click="onClickDelete"/>
			</view>
			
			<view class="productItem__row productItem__space-even">
				<view class="productItem__price">
					<text class="productItem__price-symbol">￥</text>
					<text class="productItem__price-integer">{{integer_of_price}}</text>
					<text class="productItem__price-decimal">{{`.${decimal_of_price}`}}</text>
				</view>
				<uni-number-box 
					v-if="!productData.state"
					:min="1" 
					:max="9" 
					:value="productData.num"
					@change="onChangeCount"
				></uni-number-box>
			</view>
		</view>
		
	</view>
</view>

</template>

<style scoped lang="scss">
.custom-select{
  background-color: #f4f3f4; /* 设置背景颜色为灰色 */
  font-size: 13px;
}
.container{
	display: inline-block;
	width: 200rpx;
	height: 200rpx;
	border-radius: 25rpx;
	margin-right: 20rpx;
	position: relative;
}
.productItem{
	width: 100%;
	margin-bottom: 30rpx;
	
	&__row{
		display: flex;
		flex-direction: row;
	}
	&__space-even{
		justify-content: space-between;
	}
	&__col{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
	&__checkbox{
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 200rpx;
	}
	&__image{
		width: 200rpx;
		height: 200rpx;
		border-radius: 25rpx;
		margin-right: 20rpx;
		overflow: hidden;
		&-overlay{
			position: absolute;
			bottom: 0;
			background-color: rgba(128, 128, 128, 0.3);
			width: 100%;
			height: 100%;
			border-radius: 25rpx;
			pointer-events: none;
			align-items: center;
			&-text{
				width: 60%;
				height: 30%;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
				align-items: center;
				display: grid;
				border-radius: 20rpx;
				color: white;
				background-color: rgba(0, 0, 0, 0.6);
			}
		}
	}
	&__attr{
		&-bg{
			background-color: rgb(246, 245, 246);
			height: 50rpx;
			border-radius: 18rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		&-text{
			font-size: 12px;
			color: rgb(128, 128, 128);
			margin-left: 16rpx;
			margin-right: 16rpx;
			margin-top: auto;
			margin-bottom: auto;
			width: 90%;
		}
	}
	&__product {
		&-name{
			color: rgb(43, 43, 43);
			font-size: 14px;
			line-height: 20px;
			margin-bottom: 20rpx;
			width: 400rpx;
			overflow: hidden; /* 超出部分隐藏 */
			text-overflow: ellipsis; /* 超出宽度用省略号表示 */
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	}
	&__data_select{
		width: 400rpx;
		border-radius: 20rpx;
		margin-bottom: 15rpx;
	}
	&__tag{
		margin-bottom: 20rpx;
	}
	&__price{
		&-symbol{
			color: red;
			font-size: 10px;
		}
		&-integer{
			color: red;
			font-size: 18px;
		}
		&-decimal{
			color: red;
			font-size: 10px;
		}
	}
	&__inactive{
		&-view-specs{
			height: 50rpx;
			justify-content: space-between;
			align-items: flex-end;
			margin-top: 5rpx;
			margin-bottom: 30rpx;
		}
		&-specs{
			margin-bottom: 2rpx;
			font-size: 12px;
			line-height: 27px;
			color: rgb(128, 128, 128);
		}
		&-cancel{
			width: 50rpx;
			height: 50rpx;
		}
	}
}
</style>